Ryan's Blog

切换主题

在 VitePress 中集成 TailwindCSS ​

标签
VitePress
字数
315 字
阅读时间
2 分钟

添加依赖 ​

shell
pnpm add tailwindcss @tailwindcss/postcss postcss autoprefixer -D

初始化 Tailwind 配置文件 ​

shell
npx tailwindcss init

执行命令后，根目录下会生成文件 tailwind.config.js

修改 Tailwind 配置文件 ​

js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./zh-CN/**/*.js",
    "./zh-CN/**/*.ts",
    "./zh-CN/**/*.vue",
    "./zh-CN/**/*.md",
  ],
  options: {
    safelist: ["html", "body"],
  },
};

zh-CN 是 VitePress 默认的项目根目录。

添加 Tailwind 指令到主 CSS 文件 ​

css
// /.vitepress/style/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

主 CSS 文件的名称随意，注意放在 theme 路径下即可

引入主 CSS 文件 ​

需要在 .vitepress/theme/index.ts 文件 (即“主题入口文件”) 中引入主 CSS。

typescript
//  .vitepress/theme/index.ts
import "./tailwind.css";
// 此处省略了其他配置

创建 postcss.config.cjs ​

在根目录下创建 postcss.config.mjs

js
// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

如果以 .js 作为后缀可能会遇到 ReferenceError，如下所示：

shell
[ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '[filePath]\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

所以最好以 .cjs 作为后缀。

至此，我们完成了在 VitePress 中集成 TailwindCSS。

参考资料 ​

  1. VitePress + Tailwind + ant-design-vue + 图片放大 功能使用
  2. VitePress

贡献者

The avatar of contributor named as Ryan.G Ryan.G

页面历史